<!--
 * @Description: 上传sop对话框
 * @Author: lwx
 * @Date: 2022-11-24 23:09:04
 * @LastEditors: lwx
 * @LastEditTime: 2023-04-03 17:48:39
-->
<template>
   <el-dialog
     :visible.sync="isVisible"
     title="上传sop文件"
     width="40%"
     @close="closeDialog">
     <el-form :model="sopForm"
       label-width="120px">
       <el-form-item  label="产品编号">
         <el-input v-model="sopForm.product_no"  :validate-event="false" :disabled="true"></el-input>
       </el-form-item>
       <el-form-item label="产品名称">
         <el-input v-model="sopForm.product_name"  :validate-event="false" :disabled="true"></el-input>
       </el-form-item>
       <el-form-item label="SOP">
         <el-upload
           ref="upload"
           action="#"
           accept=".PDF,.pdf"
           :limit="1"
           :file-list="fileList"
           :on-remove="handleRemoveFile"
           :on-change="getFile">
           <el-button slot="trigger" size="small" type="success">选取文件</el-button>
           <div slot="tip" class="el-upload__tip colorRed">只能上传PDF格式文件</div>
         </el-upload>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit('sopForm')">确认上传</el-button>
        <el-button @click="isVisible = false">关 闭</el-button>
     </span>
   </el-dialog>
</template>

<script>
import {uploadSop} from '@/api/product.js'
import {getBase64} from '@/utils'
export default {
  name: "SopDialog",
  data() {
    return {
      //控制对话框显示
      isVisible: this.isShow,
      fileList:[],
      file:'',
      sopForm:{

      }
    }
  },
  props: {
    isShow: Boolean,
    dialogRow: Object,
  },
  mounted() {  
    this.sopForm = this.dialogRow;  
  },
  methods: {
     //上传
    async getFile(file, fileList){
       const fileName=file.name
       this.file=file.raw
       const url = await getBase64(this.file)
       this.fileList.push({name:fileName,url:url})
    },
    //确认提交
   async onSubmit(){
      if(this.file){
        const formDatas = new FormData(); 
        formDatas.append("product_id", this.sopForm.product_id)
        formDatas.append("data", this.file)
         await uploadSop(formDatas)
        this.$message.success('上传成功！')
        this.isVisible = false; //关闭对话框
        this.$emit("refreshList"); //刷新列表
      }else{
        this.$message.error('请选择要上传的文件！')
      }
    },
    //移除文件
    handleRemoveFile(file, fileList){
      this.file=null
      this.fileList=[]
    },
    //关闭对话框
    closeDialog() {
      this.$emit("closeDialog");
    },
  },
};
</script>

<style lang = "scss" scoped>


</style>
